'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import styled from 'styled-components';
import { Menu, Dropdown, Button, Avatar } from 'antd';
import { UserOutlined, BellOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const NavbarContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: rgba(13, 28, 50, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
`;

const Logo = styled.div`
  display: flex;
  align-items: center;
  
  img {
    height: 40px;
    margin-right: 15px;
  }
`;

const Title = styled.h1`
  color: white;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
`;

const Navigation = styled.div`
  flex: 1;
  margin: 0 20px;
  
  .ant-menu {
    background: transparent;
    border: none;
    color: #ffffff;
    
    .ant-menu-item {
      color: rgba(255, 255, 255, 0.8);
      
      &:hover {
        color: #1890ff;
      }
      
      &.ant-menu-item-selected {
        background: rgba(24, 144, 255, 0.2);
        color: #1890ff;
        
        &:after {
          border-bottom: 2px solid #1890ff;
        }
      }
    }
  }
`;

const UserActions = styled.div`
  display: flex;
  align-items: center;
  gap: 15px;
  
  .time-display {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 15px;
  }
  
  .notification-icon {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    position: relative;
    
    &:hover {
      color: #1890ff;
    }
    
    .badge {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 16px;
      height: 16px;
      background: #f5222d;
      border-radius: 50%;
      color: white;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
`;

const formatDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekDay = weekDays[now.getDay()];
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`;
};

export default function TopNavigation() {
  const router = useRouter();
  const [currentDate, setCurrentDate] = useState(formatDateTime());
  const [selectedKey, setSelectedKey] = useState('airspace');
  
  // 更新时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentDate(formatDateTime());
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
  
  // 当页面加载时强制设置为空域监控，并重定向
  useEffect(() => {
    setSelectedKey('airspace');
    // 可以选择性跳转到空域监控页面
    // router.push('/airspace');
  }, []);
  
  // 菜单项
  const items: MenuProps['items'] = [
    {
      key: 'dashboard',
      label: '综合监控',
    },
    {
      key: 'airspace',
      label: '空域监控',
    },
    {
      key: 'flight',
      label: '飞行管理',
    },
    {
      key: 'warning',
      label: '预警监控',
    },
    {
      key: 'cooperation',
      label: '部门协同',
    },
    {
      key: 'analysis',
      label: '数据分析',
    },
  ];
  
  // 用户下拉菜单项
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人信息',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      danger: true,
    },
  ];
  
  // 处理菜单点击
  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setSelectedKey(e.key);
    
    // 路由导航逻辑
    switch (e.key) {
      case 'dashboard':
        router.push('/dashboard');
        break;
      case 'airspace':
        router.push('/airspace');
        break;
      case 'flight':
        router.push('/flight');
        break;
      case 'warning':
        router.push('/warning');
        break;
      case 'cooperation':
        router.push('/cooperation');
        break;
      case 'analysis':
        router.push('/analysis');
        break;
    }
  };
  
  // 处理用户菜单点击
  const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
    if (key === 'logout') {
      // 清除登录状态
      localStorage.removeItem('user');
      router.push('/login');
    } else if (key === 'settings') {
      router.push('/settings');
    } else if (key === 'profile') {
      router.push('/profile');
    }
  };
  
  return (
    <NavbarContainer>
      <Logo>
        <Title>江门市空域链低空智能管理系统</Title>
      </Logo>
      
      <Navigation>
        <Menu
          mode="horizontal"
          items={items}
          selectedKeys={[selectedKey]}
          onClick={handleMenuClick}
          style={{ background: 'transparent', borderBottom: 'none' }}
        />
      </Navigation>
      
      <UserActions>
        <div className="time-display">
          {currentDate}
        </div>
        
        <div className="notification-icon">
          <BellOutlined />
          <span className="badge">5</span>
        </div>
        
        <Dropdown 
          menu={{ items: userMenuItems, onClick: handleUserMenuClick }} 
          placement="bottomRight"
        >
          <Button 
            type="text" 
            icon={<Avatar size="small" icon={<UserOutlined />} />}
            style={{ color: 'white' }}
          >
            管理员
          </Button>
        </Dropdown>
      </UserActions>
    </NavbarContainer>
  );
} 